<template>
  <el-select
    v-model="value"
    :placeholder="placeholder"
    class="enum-select"
    v-bind="$attrs"
    :multiple="multiple"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>
<script lang="ts" setup>
import { getLabelValueList } from "@/utils/enums";

const props = defineProps({
  modelValue: {},
  placeholder: {},
  enums: {},
});

const emits = defineEmits(["update:modelValue"]);

const value = ref(props.modelValue);

watch(
  () => value.value,
  (newVal) => {
    emits("update:modelValue", newVal);
  }
);
watch(
  () => props.modelValue,
  (newVal) => {
    value.value = newVal;
  }
);

const options = computed(() => getLabelValueList(props.enums));
</script>
<style scoped lang="scss">
.enum-select {
  width: 240px;
}
</style>
